/* echo app guide */


body {
	background-color: #fff;
}

section:after,
section h3,
section .tip,
.btn {
	background-image: url(../images/echo_guide_sprites@2x.png);
	background-size: 320px;
}
@media (-webkit-min-device-pixel-ratio:3) {
	section:after,
	section h3,
	section .tip,
	.btn {
		background-image: url(../images/echo_guide_sprites@3x.png);
		background-size: 320px;
	}
}

/* header */
.app-guide-header {
	padding-top: 95.625%;
	background-image: url(../images/echo_guide_header_bg@4x.png);
	background-size: cover;
}
.app-guide-header hgroup {
	position: absolute;
	top: 52.2875%;
	right: 12.5%;
	width: 44.375%;
	text-align: center;
}
.app-guide-header hgroup h2 {
	color: #9b9b9b;
	font-size: 14px;
}
.app-guide-header hgroup h2 small {
	font-size: 12px;
}
.app-guide-header h3 {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 84.84375%;
	padding-top: 29.375%;
}
.app-guide-header h3 span,
.app-guide-header h3 small {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -26px;
	line-height: 16px;
}
.app-guide-header h3 span {
	margin-top: -16px;
	color: #4a4a4a;
	font-size: 12px;
}
.app-guide-header h3 small {
	color: #828282;
	font-size: 10px;
}
.app-guide-header h3 a {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* section */
section {
	margin-top: -140px;
	position: relative;
	width: 100%;
	height: 400px;
	overflow-x: hidden;
}
section:before {
	content: "";
	position: absolute;
	top: 17%;
	left: -20%;
	width: 160%;
	height: 60%;
	-webkit-transform: rotate(12deg);
	transform: rotate(12deg);
}
section:after {
	content: "";
	position: absolute;	
}
section h3 {
	position: absolute;
}
.voice {
	position: absolute;
	text-align: center;
}
.voice .img-wp {
	position: relative;
	width: 95px;
	height: 95px;
}
.voice .img-wp img {
	display: block;
	width: 95px;
	height: 95px;
	border: 5px solid #d2ebda;
}
.voice .img-wp .play-btn {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -15px;
	margin-left: -16px;
	width: 31px;
	height: 31px;
}
.voice .img-wp .play-btn.active {
	background-position: -50px 0;
}
.voice h4 {
	margin-top: 8px;
	font-size: 12px;
	line-height: 1em;
}
.voice b {
	font-size: 9px;
}

/* section 1 */
.section-1 {
	margin-top: 10px;
	color: #18bc8a;
}
.section-1:before {
	background: #e5ffed;
}
.section-1:after {
	top: 10%;
	right: 3.125%;
	width: 101px;
	height: 300px;
	background-position: 0 -100px;
}
.section-1 h3 {
	top: 22%;
	left: 5%;
	width: 166px;
	height: 47px;
	background-position: 0 -50px;
}
.section-1 .tip {
	position: absolute;
	top: 38%;
	left: 50%;
	margin-left: -145px;
	padding-left: 10px;
	width: 94px;
	height: 25px;
	color: #fff;
	font-size: 10px;
	line-height: 25px;
	background-position: -200px -100px;
}
.section-1 .voice {
	top: 38%;
	left: 50%;
	margin-left: -48px;
}

/* section 2 */
.section-2 {
	color: #23a0bd;
}
.section-2:before {
	background: #d8faf6;
}
.section-2:after {
	top: 2%;
	left: 10.9375%;
	width: 108px;
	height: 128px;
	background-position: 0 -475px;
}
.section-2 h3 {
	top: 38%;
	left: 4.6875%;
	width: 149px;
	height: 68px;
	background-position: 0 -400px;
}
.section-2 .voice {
	top: 32%;
	right: 10.9375%;
}
.section-2 .voice .img-wp img {
	border-color: #c3e8d9;
}

/* section 3 */
.section-3 {
	color: #6eb71f;
}
.section-3:before {
	background: #f7ffdd;
}
.section-3:after {
	top: 2%;
	left: 0;
	width: 100px;
	height: 196px;
	background-position: 0 -700px;
}
.section-3 h3 {
	top: 24%;
	right: 13.75%;
	width: 166px;
	height: 57px;
	background-position: 0 -625px;
}
.section-3 .voice {
	top: 45%;
	right: 0;
	width: 240px;
	text-align: left;
}
.section-3 .voice .img-wp img {
	border-color: #e2f0b8;
}
.section-3 .voice h4 {
	position: absolute;
	left: 110px;
	top: 30px;
}
.section-3 .voice b {
	position: absolute;
	left: 110px;
	top: 50px;
}

/* section 4 */
.section-4 {
	margin-top: -175px;
	color: #666;
	height: 600px;
}
.section-4:before {
	background: #ffebdd;
}
.section-4:after {
	top: 85px;
	left: 50%;
	margin-left: -30px;
	width: 60px;
	height: 60px;
	background-position: 0 -975px;
}
.section-4 h3 {
	top: 160px;
	left: 50%;
	margin-left: -66px;
	width: 131px;
	height: 58px;
	background-position: 0 -900px;
}
.section-4 ul {
	position: absolute;
	top: 220px;
	padding: 0 16px;
	width: 100%;
}
.section-4 ul li {
	position: relative;
	padding: 12px 0;
	border-bottom: 1px solid #f5ccb0;
}
.section-4 ul li .user-avatar {
	position: absolute;
	top: 12px;
	left: 0;
	width: 40px;
	height: 40px;
}
.section-4 ul li .user {
	margin: 0 58px 0 55px;
	padding-top: 3px;
}
.section-4 ul li .user span {
	display: block;
}
.section-4 ul li .user p {
	color: #999;
	font-size: 10px;
}
.section-4 ul li .btn {
	position: absolute;
	top: 22px;
	right: 0;
	width: 52px;
	height: 25px;
	background-position: -100px -975px;
}
.section-4 ul li .btn.active {
	background-position: -200px -975px;
}

/* section 5 */
.section-5 {
	margin-top: -186px;
	color: #666;
	height: 400px;
}
.section-5:before {
	background: #e5ffed;
}
.section-5:after {
	display: none;
}
.section-5 h3 {
	top: 150px;
	left: 50%;
	margin-left: -112px;
	width: 223px;
	height: 52px;
	background-position: 0 -1050px;
}
.section-5 .btn {
	position: absolute;
	top: 255px;
	left: 50%;
	margin-left: -84px;
	width: 168px;
	height: 50px;
	background-position: 0 -1125px;
}
.section-5 .return-btn {
	position: absolute;
	top: 340px;
	left: 50%;
	margin-left: -60px;
	width: 120px;
	color: #18bc8a;
	font-size: 14px;
	text-align: center;
}
.section-5 .bottom-bg {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 200px;
	background: #e5ffed;
}

@media only screen and (min-device-width: 375px) and (-webkit-device-pixel-ratio: 2) {
	.section-1:after {
		top: 11%;
	}
	.section-4 {
		margin-top: -177px;
		height: 625px;
	}
	.section-5 {
		margin-top: -190px;
	}
}

@media (-webkit-min-device-pixel-ratio:3) {
	.app-guide-header h3 span {
		font-size: 14px;
	}
	.app-guide-header h3 small {
		font-size: 12px;
	}
	.section-1:after {
		top: 12%;
	}
	.section-4 {
		margin-top: -177px;
		height: 630px;
	}
	.section-4 ul li .user span {
		font-size: 14px;
	}
	.section-4 ul li .user p {
		font-size: 12px;
	}
	.section-5 {
		margin-top: -192px;
	}
}